import type React from 'react'
import { useTheme } from '../../theme'
import styles from './Card.module.less'

export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
  title?: React.ReactNode
  subtitle?: React.ReactNode
  footer?: React.ReactNode
  bordered?: boolean
  hoverable?: boolean
  children: React.ReactNode
}

const Card: React.FC<CardProps> = ({
  title,
  subtitle,
  footer,
  bordered = true,
  hoverable = false,
  children,
  className,
  ...props
}) => {
  const { theme, themeName } = useTheme()

  const classNames = [
    styles.card,
    styles[`theme-${themeName}`],
    bordered && styles.bordered,
    hoverable && styles.hoverable,
    className,
  ]
    .filter(Boolean)
    .join(' ')

  const cardStyle = {
    '--theme-card-background': theme.colors.background.card,
    '--theme-primary-shadow': theme.colors.shadow.primary,
    '--theme-secondary-shadow': theme.colors.shadow.secondary,
    '--theme-primary-light': theme.colors.primary.light,
    '--theme-text-primary': theme.colors.text.primary,
    '--theme-text-secondary': theme.colors.text.secondary,
  } as React.CSSProperties

  return (
    <div className={classNames} style={cardStyle} {...props}>
      {(title || subtitle) && (
        <div className={styles.header}>
          {title && <div className={styles.title}>{title}</div>}
          {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
        </div>
      )}
      <div className={styles.content}>{children}</div>
      {footer && <div className={styles.footer}>{footer}</div>}
    </div>
  )
}

export default Card
